<template>
     <div class="box">
      <div class="header">
        <van-nav-bar
  title="详情页"
 
  left-arrow
  @click-left="$router.back()"
/>
      </div>
      <div class="content">
         <div><img :src="detailInfo.image" alt="" style="width:100%;"></div>
         <div>{{detailInfo.title}}</div>
         <div>￥{{detailInfo.price}}</div>
      </div>

      <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.totalCount" @click="$router.push('/cart')"/>
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车" @click="addCart"/>
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import request from '@/utils/request'
import {useRoute} from 'vue-router'
import {useCounterStore} from '@/stores/counter'
const store = useCounterStore()
const route =useRoute()
const detailInfo =ref({})
onMounted(()=>{
    request.get('/detail',{
        params:{
            id:route.params.id
        }
    }).then(res=>{
        if(res.data.code==200)
        {
          detailInfo.value=res.data.data
        }
    })
})
const addCart=()=>{
    store.addItem(detailInfo.value)
}
</script>


